<template>
  <el-container>
    <el-header style="position: relative">
      <div class="header-container">
        <h1>小狗管理系统</h1>
        <el-button
          type="primary"
          size="default"
          @click="handleMotify(null)"
          style="position: absolute; bottom: 10px"
          >新增</el-button
        >
      </div>
    </el-header>
    <el-main>
      <el-card>
        <el-table :data="tableData"border>
          <el-table-column type="index" />
          <el-table-column prop="dogName" label="dogName" width="180" />
          <el-table-column prop="age" label="age" width="180" />
          <el-table-column prop="age" label="age"width="180">
            <template #default="{ row }">
              <el-button
                type="primary"
                size="default"
                @click="handleMotify(row)"
                >修改</el-button
              >
              <el-popconfirm
                confirm-button-text="Yes"
                cancel-button-text="No"
                title="确认删除吗?"
                @confirm="handleDelete(row)"
              >
                <template #reference>
                  <el-button type="danger" size="default">删除</el-button>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>

        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[5, 10, 15, 20]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
        <el-dialog
          v-model="dialogVisible"
          :title="title"
          width="500"
          :close-on-click-modal="false"
        >
          <el-form :model="dogObj" label-width="80px" :inline="false">
            <el-form-item label="">
              <el-input v-model="dogObj.dogName"></el-input>
            </el-form-item>
            <el-form-item label="">
              <el-input v-model="dogObj.age"></el-input>
            </el-form-item>
          </el-form>

          <template #footer>
            <div class="dialog-footer">
              <el-button @click="handleClose">Cancel</el-button>
              <el-button type="primary" @click="handleEditAndInsert(func)">
                Confirm
              </el-button>
            </div>
          </template>
        </el-dialog>
      </el-card>
    </el-main>
  </el-container>
</template>

<script setup>
import { ref, onMounted } from "vue";
import {
  getDogList,
  deleteDogById,
  insertDog,
  updateDog,
  getDogById
} from "@/api/userApi.js";
import { ElNotification } from "element-plus";
const tableData = ref();
const currentPage = ref(1);
const pageSize = ref(5);
const total = ref(0);
const title = ref("");
const dialogVisible = ref(false);
const dogObj = ref({
  dogId: "",
  dogName: "",
  age: "",
});
onMounted(() => {
  getData();
});
const getData = async () => {
  const res = await getDogList(currentPage.value, pageSize.value);
  tableData.value = res.data.data;
  total.value = res?.data.total || 0;
};
const handleSizeChange = (val) => {
  pageSize.value = val;
  getData();
};
const handleCurrentChange = (val) => {
  currentPage.value = val;
  getData();
};

const handleDelete = async (row) => {
  const res = await deleteDogById(row.dogId);
  ElNotification({
    message: res.data,
    type: "success",
  });
  getData();
};

const handleMotify = async (row) => {
  // if (row) {
  //   dogObj.value.dogId = row.dogId;
  //   dogObj.value.dogName = row.dogName;
  //   dogObj.value.age = row.age;
  // }
  if (row) {
    const res = await getDogById(row.dogId)
    dogObj.value.dogId = res.data.dogId;
    dogObj.value.dogName = res.data.dogName;
    dogObj.value.age = res.data.age;
    
  }
  title.value = row ? "更新" : "新增";
  dialogVisible.value = true;
};

const handleEditAndInsert = async () => {
  console.log("handleEditAndInsert");
  const func = dogObj.value.dogId ? updateDog : insertDog;
  const res = await func(dogObj.value);
  if (res.code == 200) {
    ElNotification({
      type: "success",
      message: res.data,
    });
    dialogVisible.value = false;
    resetDogObj();
  }
  getData();
};

const handleClose = () => {
  dialogVisible.value = false;
  resetDogObj();
};

const resetDogObj = () => {
  dogObj.value.dogId = "";
  dogObj.value.dogName = "";
  dogObj.value.age = "";
};
</script>

<style scoped>
body {
  width: 100vw;
  height: 100vh;
}

.el-header {
  background-color: #2c3e50;
  color: white;
  height: 70px;
  display: flex;
  justify-content: center;
}
.header-container {
  min-width: 450px;
  width: 60%;
}
.el-main {
  background-color: #ecf0f1;
  height: calc(100vh - 70px);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.el-card {
  min-width: 550px;
  width: 60%;
  display: flex;
  justify-content: center;
  overflow: auto;
}
.el-card .el-table{
}
.el-card .el-pagination {
  margin-top: 30px;
}
</style>
